<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>互联网实验室 - 招新系统</title>
  <!-- 引入外部资源 -->
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>

  <!-- Tailwind 配置 -->
  <script>

    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#36BFFA',
            dark: '#1D2939',
            light: '#F9FAFB',
            accent: '#7B61FF',
            success: '#039855',
            warning: '#F79009',
            danger: '#D92D20',
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
          animation: {
            'fade-in': 'fadeIn 0.5s ease-in-out',
            'slide-up': 'slideUp 0.5s ease-out',
            'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
          },
          keyframes: {
            fadeIn: {
              '0%': { opacity: '0' },
              '100%': { opacity: '1' },
            },
            slideUp: {
              '0%': { transform: 'translateY(20px)', opacity: '0' },
              '100%': { transform: 'translateY(0)', opacity: '1' },
            }
          }
        },
      }
    }
  </script>

  <!-- 自定义工具类 -->
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
      }
      .card-hover {
        @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
      }
      .btn-primary {
        @apply bg-primary text-white px-6 py-3 rounded-lg font-medium transition-all duration-300 hover:bg-primary/90 hover:shadow-lg active:scale-95 focus:outline-none focus:ring-2 focus:ring-primary/50;
      }
      .btn-secondary {
        @apply bg-white text-primary border border-primary px-6 py-3 rounded-lg font-medium transition-all duration-300 hover:bg-primary/5 hover:shadow-md active:scale-95 focus:outline-none focus:ring-2 focus:ring-primary/50;
      }
      .input-field {
        @apply w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all duration-300 outline-none;
      }
      .section-padding {
        @apply py-16 md:py-24;
      }
    }
    /* 弹窗背景遮罩样式 */
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1000;
      display: none;
    }
    /* 弹窗内容样式 */
    .modal-content {
      background-color: white;
      padding: 20px;
      border-radius: 8px;
      width: 400px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    }
    /* 通知下拉菜单样式 */
    .notifications-dropdown {
      position: absolute;
      top: 100%;
      right: 0;
      width: 350px;
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      z-index: 100;
      margin-top: 8px;
      max-height: 400px;
      overflow-y: auto;
      display: none;
    }
    .notification-item {
      padding: 12px 16px;
      border-bottom: 1px solid #f0f0f0;
      cursor: pointer;
      transition: background-color 0.2s;
    }
    .notification-item:hover {
      background-color: #f9fafb;
    }
    .notification-item.unread {
      background-color: #f0f7ff;
    }
    .notification-badge {
      position: absolute;
      top: -4px;
      right: -4px;
      width: 18px;
      height: 18px;
      background-color: #D92D20;
      border-radius: 50%;
      color: white;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .notification-header {
      padding: 12px 16px;
      font-weight: 600;
      border-bottom: 1px solid #f0f0f0;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .mark-all-read {
      font-size: 12px;
      color: #165DFF;
      cursor: pointer;
    }
  </style>
</head>

<body class="font-inter bg-gray-50 text-dark antialiased">
  <!-- 导航栏 -->
  <header id="navbar"
    class="fixed w-full top-0 z-50 transition-all duration-300 bg-white/90 backdrop-blur-md shadow-sm">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex justify-between items-center h-16 md:h-20">
        <!-- Logo -->
        <div class="flex items-center space-x-2">
          <img src="../img/logo.jpg" alt="互联网实验室Logo" class="w-10 h-10 rounded-lg">
          <span class="text-xl font-bold text-dark">互联网实验室</span>
        </div>

        <!-- 桌面导航 -->
        <nav class="hidden md:flex items-center space-x-8">
          <a href="#home" class="nav-link text-dark hover:text-primary font-medium transition-colors">首页</a>
          <a href="#forum" class="nav-link text-dark hover:text-primary font-medium transition-colors">招新论坛</a>
          <a href="#apply" class="nav-link text-dark hover:text-primary font-medium transition-colors">在线报名</a>
          <a href="#result" class="nav-link text-dark hover:text-primary font-medium transition-colors">结果查询</a>

          <!-- 通知按钮 -->
          <div class="relative group">
            <button id="notificationsBtn"
              class="relative text-dark hover:text-primary font-medium transition-colors flex items-center">
              通知公告
              <i class="fa fa-bell-o ml-1"></i>
              <span id="notificationBadge" class="notification-badge">3</span>
            </button>

            <!-- 通知下拉菜单 -->
            <div class="notifications-dropdown group-hover:block" id="notificationsDropdown">
              <div class="notification-header">
                <span>通知公告</span>
                <span class="mark-all-read" id="markAllRead">全部标为已读</span>
              </div>
              <div class="notification-item unread" data-id="1">
                <div class="font-medium">招新报名截止时间延长通知</div>
                <div class="text-sm text-gray-500 mt-1">2023-09-10</div>
                <div class="text-sm text-gray-600 mt-1 line-clamp-2">原定于9月15日截止的报名时间将延长至9月20日，请各位同学注意时间安排。</div>
              </div>
              <div class="notification-item unread" data-id="2">
                <div class="font-medium">初试时间及地点通知</div>
                <div class="text-sm text-gray-500 mt-1">2023-09-08</div>
                <div class="text-sm text-gray-600 mt-1 line-clamp-2">初试将于9月16日上午9点在计算机楼301教室进行，请提前15分钟到达。</div>
              </div>
              <div class="notification-item unread" data-id="3">
                <div class="font-medium">招新宣讲会安排</div>
                <div class="text-sm text-gray-500 mt-1">2023-09-05</div>
                <div class="text-sm text-gray-600 mt-1 line-clamp-2">9月10日晚上7点将在学术报告厅举行招新宣讲会，欢迎各位同学参加。</div>
              </div>
              <div class="notification-item" data-id="4">
                <div class="font-medium">2023年互联网实验室招新启动</div>
                <div class="text-sm text-gray-500 mt-1">2023-09-01</div>
                <div class="text-sm text-gray-600 mt-1 line-clamp-2">2023年度互联网实验室招新工作正式启动，本次招新将录取50名新成员。</div>
              </div>
            </div>
          </div>

          <a href="login.html" class="nav-link text-dark hover:text-primary font-medium transition-colors"
            target="_blank">登录</a>
        </nav>

        <!-- 移动端菜单按钮 -->
        <button id="menu-toggle" class="md:hidden text-dark hover:text-primary focus:outline-none">
          <i class="fa fa-bars text-2xl"></i>
        </button>
      </div>
    </div>

    <!-- 移动端导航菜单 -->
    <div id="mobile-menu" class="md:hidden hidden bg-white border-t animate-fade-in">
      <div class="container mx-auto px-4 py-3 space-y-3">
        <a href="#home" class="block py-2 text-dark hover:text-primary font-medium transition-colors">首页</a>
        <a href="#forum" class="block py-2 text-dark hover:text-primary font-medium transition-colors">招新论坛</a>
        <a href="#apply" class="block py-2 text-dark hover:text-primary font-medium transition-colors">在线报名</a>
        <a href="#result" class="block py-2 text-dark hover:text-primary font-medium transition-colors">结果查询</a>

        <!-- 移动端通知 -->
        <div class="relative">
          <button id="mobileNotificationsBtn"
            class="w-full flex justify-between items-center py-2 text-dark hover:text-primary font-medium transition-colors">
            <span>通知公告</span>
            <i class="fa fa-bell-o"></i>
            <span id="mobileNotificationBadge" class="notification-badge">3</span>
          </button>

          <div class="notifications-dropdown ml-4 mt-2 w-[calc(100%-32px)]" id="mobileNotificationsDropdown">
            <div class="notification-header">
              <span>通知公告</span>
              <span class="mark-all-read" id="mobileMarkAllRead">全部标为已读</span>
            </div>
            <div class="notification-item unread" data-id="1">
              <div class="font-medium">招新报名截止时间延长通知</div>
              <div class="text-sm text-gray-500 mt-1">2023-09-10</div>
              <div class="text-sm text-gray-600 mt-1 line-clamp-2">原定于9月15日截止的报名时间将延长至9月20日，请各位同学注意时间安排。</div>
            </div>
            <div class="notification-item unread" data-id="2">
              <div class="font-medium">初试时间及地点通知</div>
              <div class="text-sm text-gray-500 mt-1">2023-09-08</div>
              <div class="text-sm text-gray-600 mt-1 line-clamp-2">初试将于9月16日上午9点在计算机楼301教室进行，请提前15分钟到达。</div>
            </div>
            <div class="notification-item unread" data-id="3">
              <div class="font-medium">招新宣讲会安排</div>
              <div class="text-sm text-gray-500 mt-1">2023-09-05</div>
              <div class="text-sm text-gray-600 mt-1 line-clamp-2">9月10日晚上7点将在学术报告厅举行招新宣讲会，欢迎各位同学参加。</div>
            </div>
            <div class="notification-item" data-id="4">
              <div class="font-medium">2023年互联网实验室招新启动</div>
              <div class="text-sm text-gray-500 mt-1">2023-09-01</div>
              <div class="text-sm text-gray-600 mt-1 line-clamp-2">2023年度互联网实验室招新工作正式启动，本次招新将录取50名新成员。</div>
            </div>
          </div>
        </div>

        <a href="login.html" class="block py-2 text-dark hover:text-primary font-medium transition-colors"
          target="_blank">登录</a>
      </div>
    </div>
  </header>

  <!-- 主内容区 -->
  <main>
    <!-- 英雄区域 -->
    <section id="home" class="pt-24 md:pt-32 pb-16 md:pb-24 bg-gradient-to-br from-primary/5 to-secondary/10">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex flex-col md:flex-row items-center">
          <div class="md:w-1/2 mb-10 md:mb-0 animate-slide-up">
            <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold leading-tight text-dark mb-4">
              加入我们，<br>
              <span class="text-primary">探索互联网的无限可能</span>
            </h1>
            <p class="text-gray-600 text-lg md:text-xl mb-8 max-w-lg">
              互联网实验室2025年度招新正式启动！无论你是技术爱好者还是创意达人，这里都有适合你的位置。
            </p>
            <div class="flex flex-col sm:flex-row gap-4">
              <a href="#apply" class="btn-primary text-center">
                立即报名 <i class="fa fa-arrow-right ml-2"></i>
              </a>
              <a href="#forum" class="btn-secondary text-center">
                了解更多 <i class="fa fa-info-circle ml-2"></i>
              </a>
            </div>

            <!-- 招新数据 -->
            <div class="grid grid-cols-3 gap-4 mt-12">
              <div class="text-center">
                <div class="text-3xl font-bold text-primary">100+</div>
                <div class="text-gray-600 text-sm">报名人数</div>
              </div>
              <div class="text-center">
                <div class="text-3xl font-bold text-primary">50+</div>
                <div class="text-gray-600 text-sm">录取名额</div>
              </div>
              <div class="text-center">
                <div class="text-3xl font-bold text-primary">4</div>
                <div class="text-gray-600 text-sm">技术方向</div>
              </div>
            </div>
          </div>

          <div class="md:w-1/2 animate-fade-in">
            <div class="relative">
              <div class="absolute -top-4 -left-4 w-24 h-24 bg-accent/20 rounded-full blur-xl"></div>
              <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-primary/20 rounded-full blur-xl"></div>
              <img src="https://picsum.photos/600/400?random=1" alt="互联网实验室团队合作场景"
                class="w-full h-auto rounded-2xl shadow-xl relative z-10">
              <!-- 装饰元素 -->
              <div class="absolute top-1/4 -right-4 bg-white p-3 rounded-lg shadow-lg z-20 animate-pulse-slow">
                <div class="flex items-center gap-2">
                  <div class="w-3 h-3 bg-success rounded-full"></div>
                  <span class="font-medium text-sm">招新进行中</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 招新时间线 -->
    <section class="py-16 bg-white">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
          <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-4">招新流程</h2>
          <p class="text-gray-600 max-w-2xl mx-auto">了解我们的招新时间安排和流程，做好充分准备</p>
        </div>

        <div class="relative">
          <!-- 时间线中轴线 -->
          <div class="absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-gray-200"></div>

          <!-- 时间线项目 -->
          <div class="space-y-16 relative">
            <!-- 阶段1 -->
            <div class="flex flex-col md:flex-row items-center">
              <div class="md:w-1/2 md:pr-12 md:text-right mb-8 md:mb-0">
                <div class="bg-gray-50 p-6 rounded-xl shadow-sm card-hover">
                  <h3 class="text-xl font-bold text-dark mb-2">报名阶段</h3>
                  <p class="text-gray-600 mb-2">填写在线报名表，提交个人信息和相关材料</p>
                  <div class="text-primary font-medium">9月1日 - 9月15日</div>
                </div>
              </div>

              <div
                class="absolute left-1/2 transform -translate-x-1/2 w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center z-10">
                <i class="fa fa-file-text-o"></i>
              </div>

              <div class="md:w-1/2 md:pl-12 hidden md:block"></div>
            </div>

            <!-- 阶段2 -->
            <div class="flex flex-col md:flex-row items-center">
              <div class="md:w-1/2 md:pr-12 hidden md:block"></div>

              <div
                class="absolute left-1/2 transform -translate-x-1/2 w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center z-10">
                <i class="fa fa-comments"></i>
              </div>

              <div class="md:w-1/2 md:pl-12 mb-8 md:mb-0">
                <div class="bg-gray-50 p-6 rounded-xl shadow-sm card-hover">
                  <h3 class="text-xl font-bold text-dark mb-2">初试阶段</h3>
                  <p class="text-gray-600 mb-2">基础知识考核与简单技能测试</p>
                  <div class="text-primary font-medium">9月16日 - 9月20日</div>
                </div>
              </div>
            </div>

            <!-- 阶段3 -->
            <div class="flex flex-col md:flex-row items-center">
              <div class="md:w-1/2 md:pr-12 md:text-right mb-8 md:mb-0">
                <div class="bg-gray-50 p-6 rounded-xl shadow-sm card-hover">
                  <h3 class="text-xl font-bold text-dark mb-2">复试阶段</h3>
                  <p class="text-gray-600 mb-2">项目实操与团队协作能力考察</p>
                  <div class="text-primary font-medium">9月21日 - 9月25日</div>
                </div>
              </div>

              <div
                class="absolute left-1/2 transform -translate-x-1/2 w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center z-10">
                <i class="fa fa-code"></i>
              </div>

              <div class="md:w-1/2 md:pl-12 hidden md:block"></div>
            </div>

            <!-- 阶段4 -->
            <div class="flex flex-col md:flex-row items-center">
              <div class="md:w-1/2 md:pr-12 hidden md:block"></div>

              <div
                class="absolute left-1/2 transform -translate-x-1/2 w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center z-10">
                <i class="fa fa-check-circle"></i>
              </div>

              <div class="md:w-1/2 md:pl-12">
                <div class="bg-gray-50 p-6 rounded-xl shadow-sm card-hover">
                  <h3 class="text-xl font-bold text-dark mb-2">结果公示</h3>
                  <p class="text-gray-600 mb-2">公布录取名单，发放录取通知</p>
                  <div class="text-primary font-medium">9月30日</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 招新论坛 -->
    <section id="forum" class="section-padding bg-gray-50">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
          <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-4">招新论坛</h2>
          <p class="text-gray-600 max-w-2xl mx-auto">在这里提问、交流，了解实验室的更多信息</p>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
          <!-- 论坛帖子列表 -->
          <div class="lg:col-span-2">
            <!-- 帖子项 -->
            <div class="bg-white rounded-xl shadow-sm p-6 mb-6 card-hover">
              <div class="flex items-start">
                <img src="https://picsum.photos/50/50?random=10" alt="用户头像" class="w-10 h-10 rounded-full mr-4">
                <div class="flex-1">
                  <div class="flex justify-between items-start">
                    <div>
                      <h3 class="font-bold text-lg mb-1">实验室主要研究哪些方向？有前端开发吗？</h3>
                      <div class="text-gray-500 text-sm">
                        <span class="mr-4">李同学</span>
                        <span>2小时前</span>
                      </div>
                    </div>
                    <span class="bg-primary/10 text-primary text-xs px-3 py-1 rounded-full">已回答</span>
                  </div>
                  <p class="text-gray-600 mt-3">我是计算机科学专业大二学生，比较擅长前端开发，想了解实验室是否有相关的研究方向...</p>
                  <div class="flex justify-between items-center mt-4">
                    <div class="flex space-x-4 text-gray-500">
                      <span><i class="fa fa-comment-o mr-1"></i> 12</span>
                      <span><i class="fa fa-eye mr-1"></i> 89</span>
                    </div>
                    <a href="#" class="text-primary hover:text-primary/80 font-medium text-sm">查看详情</a>
                  </div>
                </div>
              </div>
            </div>

            <div class="bg-white rounded-xl shadow-sm p-6 mb-6 card-hover">
              <div class="flex items-start">
                <img src="https://picsum.photos/50/50?random=11" alt="用户头像" class="w-10 h-10 rounded-full mr-4">
                <div class="flex-1">
                  <div class="flex justify-between items-start">
                    <div>
                      <h3 class="font-bold text-lg mb-1">请问面试会考察哪些知识点？需要提前准备什么？</h3>
                      <div class="text-gray-500 text-sm">
                        <span class="mr-4">王同学</span>
                        <span>昨天 14:30</span>
                      </div>
                    </div>
                    <span class="bg-primary/10 text-primary text-xs px-3 py-1 rounded-full">已回答</span>
                  </div>
                  <p class="text-gray-600 mt-3">我对人工智能方向很感兴趣，想知道面试会侧重考察哪些方面的知识，有什么需要特别准备的吗？</p>
                  <div class="flex justify-between items-center mt-4">
                    <div class="flex space-x-4 text-gray-500">
                      <span><i class="fa fa-comment-o mr-1"></i> 25</span>
                      <span><i class="fa fa-eye mr-1"></i> 156</span>
                    </div>
                    <a href="#" class="text-primary hover:text-primary/80 font-medium text-sm">查看详情</a>
                  </div>
                </div>
              </div>
            </div>

            <div class="bg-white rounded-xl shadow-sm p-6 mb-6 card-hover">
              <div class="flex items-start">
                <img src="https://picsum.photos/50/50?random=12" alt="用户头像" class="w-10 h-10 rounded-full mr-4">
                <div class="flex-1">
                  <div class="flex justify-between items-start">
                    <div>
                      <h3 class="font-bold text-lg mb-1">实验室有哪些正在进行的项目？</h3>
                      <div class="text-gray-500 text-sm">
                        <span class="mr-4">张同学</span>
                        <span>3天前</span>
                      </div>
                    </div>
                    <span class="bg-success/10 text-success text-xs px-3 py-1 rounded-full">官方回复</span>
                  </div>
                  <p class="text-gray-600 mt-3">想了解一下实验室目前有哪些项目在进行中，加入后能参与到什么样的工作中？</p>
                  <div class="flex justify-between items-center mt-4">
                    <div class="flex space-x-4 text-gray-500">
                      <span><i class="fa fa-comment-o mr-1"></i> 31</span>
                      <span><i class="fa fa-eye mr-1"></i> 210</span>
                    </div>
                    <a href="#" class="text-primary hover:text-primary/80 font-medium text-sm">查看详情</a>
                  </div>
                </div>
              </div>
            </div>

            <!-- 分页 -->
            <div class="flex justify-center mt-8">
              <nav class="inline-flex rounded-md shadow-sm" aria-label="分页">
                <a href="#"
                  class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                  <i class="fa fa-chevron-left"></i>
                </a>
                <a href="#"
                  class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-primary text-sm font-medium text-white">
                  1
                </a>
                <a href="#"
                  class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                  2
                </a>
                <a href="#"
                  class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                  3
                </a>
                <span
                  class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
                  ...
                </span>
                <a href="#"
                  class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                  8
                </a>
                <a href="#"
                  class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                  <i class="fa fa-chevron-right"></i>
                </a>
              </nav>
            </div>
          </div>

          <!-- 侧边栏 -->
          <div class="lg:col-span-1">
            <!-- 发布新帖 -->
            <div class="bg-primary rounded-xl p-6 text-white mb-8">
              <h3 class="text-xl font-bold mb-3">有疑问？</h3>
              <p class="mb-4">在论坛发布你的问题，我们会尽快解答</p>
              <button id="postBtn"
                class="w-full bg-white text-primary py-3 rounded-lg font-medium transition-all duration-300 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-white/50">
                发布新帖 <i class="fa fa-pencil ml-1"></i>
              </button>
            </div>
            <!-- 弹窗遮罩层 -->
            <div class="modal-overlay" id="modalOverlay">
              <div class="modal-content">
                <h2 class="text-lg font-bold mb-4">发布新帖</h2>
                <!-- 帖子标题输入框 -->
                <div class="mb-4">
                  <label for="postTitle" class="block text-gray-700 mb-2">帖子标题</label>
                  <input type="text" id="postTitle" class="w-full border border-gray-300 rounded-md p-2">
                </div>
                <!-- 帖子内容输入框 -->
                <div class="mb-4">
                  <label for="postContent" class="block text-gray-700 mb-2">帖子内容</label>
                  <textarea id="postContent" rows="5" class="w-full border border-gray-300 rounded-md p-2"></textarea>
                </div>
                <!-- 提交和取消按钮 -->
                <div class="flex justify-end">
                  <button id="cancelBtn"
                    class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded mr-2">
                    取消
                  </button>
                  <button id="submitBtn" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">
                    提交
                  </button>
                </div>
              </div>
            </div>

            <!-- 热门话题 -->
            <div class="bg-white rounded-xl shadow-sm p-6 mb-8">
              <h3 class="text-lg font-bold mb-4">热门话题</h3>
              <div class="space-y-3">
                <a href="#" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition-colors">
                  <span class="text-gray-700">• 实验室成员日常工作状态</span>
                  <span class="bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded-full">42</span>
                </a>
                <a href="#" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition-colors">
                  <span class="text-gray-700">• 招新面试经验分享</span>
                  <span class="bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded-full">38</span>
                </a>
                <a href="#" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition-colors">
                  <span class="text-gray-700">• 实验室设备与资源介绍</span>
                  <span class="bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded-full">29</span>
                </a>
                <a href="#" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition-colors">
                  <span class="text-gray-700">• 加入实验室后的收获</span>
                  <span class="bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded-full">25</span>
                </a>
                <a href="#" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition-colors">
                  <span class="text-gray-700">• 各研究方向介绍</span>
                  <span class="bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded-full">18</span>
                </a>
              </div>
            </div>

            <!-- 论坛版主 -->
            <div class="bg-white rounded-xl shadow-sm p-6">
              <h3 class="text-lg font-bold mb-4">论坛版主</h3>
              <div class="space-y-4">
                <div class="flex items-center">
                  <img src="https://picsum.photos/60/60?random=20" alt="版主头像" class="w-12 h-12 rounded-full mr-4">
                  <div>
                    <div class="font-medium">陈教授</div>
                    <div class="text-gray-500 text-sm">实验室主任</div>
                  </div>
                </div>
                <div class="flex items-center">
                  <img src="https://picsum.photos/60/60?random=21" alt="版主头像" class="w-12 h-12 rounded-full mr-4">
                  <div>
                    <div class="font-medium">林学长</div>
                    <div class="text-gray-500 text-sm">研究生/前端负责人</div>
                  </div>
                </div>
                <div class="flex items-center">
                  <img src="https://picsum.photos/60/60?random=22" alt="版主头像" class="w-12 h-12 rounded-full mr-4">
                  <div>
                    <div class="font-medium">赵学姐</div>
                    <div class="text-gray-500 text-sm">研究生/AI方向负责人</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 在线报名 -->
    <section id="apply" class="section-padding bg-white">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
          <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-4">在线报名</h2>
          <p class="text-gray-600 max-w-2xl mx-auto">填写下方表单，加入我们的互联网实验室大家庭</p>
        </div>

        <div class="max-w-4xl mx-auto">
          <div class="bg-gray-50 rounded-2xl shadow-sm p-8">
            <form id="application-form" class="space-y-6">
              <!-- 个人信息 -->
              <div>
                <h3 class="text-xl font-bold mb-6 pb-2 border-b border-gray-200">个人基本信息</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div>
                    <label for="name" class="block text-gray-700 font-medium mb-2">姓名 <span
                        class="text-danger">*</span></label>
                    <input type="text" id="name" class="input-field" placeholder="请输入您的姓名" required>
                  </div>
                  <div>
                    <label for="student-id" class="block text-gray-700 font-medium mb-2">学号 <span
                        class="text-danger">*</span></label>
                    <input type="text" id="student-id" class="input-field" placeholder="请输入您的学号" required>
                  </div>
                  <div>
                    <label for="major" class="block text-gray-700 font-medium mb-2">专业班级 <span
                        class="text-danger">*</span></label>
                    <input type="text" id="major" class="input-field" placeholder="例如互联网24-3" required>
                  </div>
                  <div>
                    <label for="grade" class="block text-gray-700 font-medium mb-2">年级 <span
                        class="text-danger">*</span></label>
                    <select id="grade" class="input-field" required>
                      <option value="" disabled selected>请选择您的年级</option>
                      <option value="freshman">大一</option>
                      <option value="sophomore">大二</option>
                      <option value="junior">大三</option>
                      <option value="senior">大四</option>
                      <option value="graduate">研究生</option>
                    </select>
                  </div>
                </div>
              </div>
              <div class="flex flex-wrap gap-4">
                <div class="flex-1 min-w-[200px]">
                  <label for="math-score" class="block text-gray-700 font-medium mb-2">高考数学成绩 <span
                      class="text-danger">*</span></label>
                  <input type="text" id="math-score"
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all"
                    placeholder="请输入高考数学成绩" required>
                </div>
                <div class="flex-1 min-w-[200px]">
                  <label for="english-score" class="block text-gray-700 font-medium mb-2">高考英语成绩 <span
                      class="text-danger">*</span></label>
                  <input type="text" id="english-score"
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all"
                    placeholder="请输入高考英语成绩" required>
                </div>
              </div>
              <div class="flex flex-wrap gap-4">
                <div class="flex-1 min-w-[200px]">
                  <label for="expertise" class="block text-gray-700 font-medium mb-2">擅长领域 <span
                      class="text-danger">*</span></label>
                  <input type="text" id="expertise"
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all"
                    placeholder="请输入您的擅长领域" required>
                </div>
                <div class="flex-1 min-w-[200px]">
                  <label for="application-time" class="block text-gray-700 font-medium mb-2">申请时间 <span
                      class="text-danger">*</span></label>
                  <input type="date" id="application-time"
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all"
                    required>
                </div>
              </div>
              <div>
                <label for="projectExperience" class="block text-gray-700 font-medium mb-2">项目经历 <span
                    class="text-danger">*</span></label>
                <textarea id="projectExperience"
                  class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all resize-none"
                  rows="6" placeholder="请详细描述您参与过的项目经历，包括项目名称、您的角色、负责的工作内容及成果等..." required></textarea>
                <p class="text-sm text-gray-500 mt-1">请详细描述，有助于更好地了解您的经验</p>
              </div>
              <div>
                <label for="otherLabRegistration" class="block text-gray-700 font-medium mb-2">其他实验室报名情况</label>
                <textarea id="otherLabRegistration"
                  class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all resize-none"
                  rows="3" placeholder="如有报名其他实验室，请在此说明相关情况..."></textarea>
                <p class="text-sm text-gray-500 mt-1">非必填项，如有相关情况可简要说明</p>
              </div>
              <div class="w-full">
                <label for="futureDevelopment" class="block text-gray-700 font-medium mb-2">未来发展 <span
                    class="text-danger">*</span></label>
                <textarea id="futureDevelopment"
                  class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all resize-none"
                  rows="4" placeholder="请谈谈您对个人长远发展的设想和期望..." required></textarea>
                <p class="text-sm text-gray-500 mt-1">请简述您的职业发展方向和目标</p>
              </div>
              <div>
                <label for="email" class="block text-gray-700 font-medium mb-2">邮箱 <span
                    class="text-danger">*</span></label>
                <input type="email" id="email" class="input-field" placeholder="请输入您的邮箱" required>
              </div>
              <div>
                <label for="phone" class="block text-gray-700 font-medium mb-2">手机号码 <span
                    class="text-danger">*</span></label>
                <input type="tel" id="phone" class="input-field" placeholder="请输入您的手机号码" required>
              </div>
          </div>
        </div>

        <!-- 意向方向 -->
        <div>
          <h3 class="text-xl font-bold mb-6 pb-2 border-b border-gray-200">意向方向</h3>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="flex items-center">
              <input type="checkbox" id="direction-1"
                class="w-4 h-4 text-primary focus:ring-primary border-gray-300 rounded">
              <label for="direction-1" class="ml-2 text-gray-700">前端开发</label>
            </div>
            <div class="flex items-center">
              <input type="checkbox" id="direction-2"
                class="w-4 h-4 text-primary focus:ring-primary border-gray-300 rounded">
              <label for="direction-2" class="ml-2 text-gray-700">后端开发</label>
            </div>
            <div class="flex items-center">
              <input type="checkbox" id="direction-3"
                class="w-4 h-4 text-primary focus:ring-primary border-gray-300 rounded">
              <label for="direction-3" class="ml-2 text-gray-700">产品</label>
            </div>
            <div class="flex items-center">
              <input type="checkbox" id="direction-4"
                class="w-4 h-4 text-primary focus:ring-primary border-gray-300 rounded">
              <label for="direction-4" class="ml-2 text-gray-700">人工智能AI</label>
            </div>

          </div>

          <div class="mt-4">
            <label for="direction-other" class="block text-gray-700 font-medium mb-2">其他意向（可选）</label>
            <input type="text" id="direction-other" class="input-field" placeholder="请输入其他意向方向">
          </div>
        </div>

        <!-- 提交按钮 -->
        <div class="pt-4">
          <button type="submit" class="btn-primary w-full md:w-auto">
            提交报名 <i class="fa fa-paper-plane ml-2"></i>
          </button>
          <p class="text-gray-500 text-sm mt-3">
            提交即表示您同意实验室的招新条款和隐私政策，我们将妥善保管您的个人信息。
          </p>
        </div>
        </form>
      </div>
      </div>
      </div>
    </section>

    <!-- 结果查询 -->
    <section id="result" class="section-padding bg-gradient-to-br from-primary/5 to-secondary/10">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
          <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-4">面试结果查询</h2>
          <p class="text-gray-600 max-w-2xl mx-auto">输入您的信息，查询面试结果</p>
        </div>

        <div class="max-w-md mx-auto">
          <div class="bg-white rounded-2xl shadow-sm p-8">
            <form id="result-form" class="space-y-6">
              <div>
                <label for="query-name" class="block text-gray-700 font-medium mb-2">姓名 <span
                    class="text-danger">*</span></label>
                <input type="text" id="query-name" class="input-field" placeholder="请输入您的姓名" required>
              </div>

              <div>
                <label for="query-id" class="block text-gray-700 font-medium mb-2">学号 <span
                    class="text-danger">*</span></label>
                <input type="text" id="query-id" class="input-field" placeholder="请输入您的学号" required>
              </div>

              <div>
                <label for="query-phone" class="block text-gray-700 font-medium mb-2">手机号码 <span
                    class="text-danger">*</span></label>
                <input type="tel" id="query-phone" class="input-field" placeholder="请输入您的手机号码" required>
              </div>

              <button type="submit" class="btn-primary w-full">
                查询结果 <i class="fa fa-search ml-2"></i>
              </button>
            </form>
          </div>
        </div>
      </div>
    </section>
  </main>

  <!-- 通知详情弹窗 -->
  <div class="modal-overlay" id="notificationModal">
    <div class="modal-content max-w-md w-full">
      <div class="flex justify-between items-center mb-4">
        <h2 class="text-xl font-bold" id="notificationModalTitle">通知标题</h2>
        <button id="closeNotificationModal" class="text-gray-500 hover:text-gray-700">
          <i class="fa fa-times text-xl"></i>
        </button>
      </div>
      <div class="text-gray-500 text-sm mb-4" id="notificationModalDate">2023-09-01</div>
      <div class="border-t border-gray-200 pt-4" id="notificationModalContent">
        通知内容将在这里显示...
      </div>
      <div class="mt-6 flex justify-end">
        <button id="markAsReadBtn" class="btn-secondary">
          标记为已读 <i class="fa fa-check ml-1"></i>
        </button>
      </div>
    </div>
  </div>

  <!-- 页脚 -->
  <footer class="bg-dark text-white py-12">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
        <div>
          <div class="flex items-center space-x-2 mb-4">
            <img src="../img/logo.jpg" alt="互联网实验室Logo" class="w-10 h-10 rounded-lg">
            <span class="text-xl font-bold">互联网实验室</span>
          </div>
          <p class="text-gray-400 mb-4">探索互联网技术的无限可能，培养未来科技人才</p>
          <div class="flex space-x-4">
            <a href="#" class="text-gray-400 hover:text-white transition-colors">
              <i class="fa fa-weibo text-xl"></i>
            </a>
            <a href="#" class="text-gray-400 hover:text-white transition-colors">
              <i class="fa fa-wechat text-xl"></i>
            </a>
            <a href="#" class="text-gray-400 hover:text-white transition-colors">
              <i class="fa fa-github text-xl"></i>
            </a>
          </div>
        </div>

        <div>
          <h3 class="text-lg font-bold mb-4">快速链接</h3>
          <ul class="space-y-2">
            <li><a href="#home" class="text-gray-400 hover:text-white transition-colors">首页</a></li>
            <li><a href="#forum" class="text-gray-400 hover:text-white transition-colors">招新论坛</a></li>
            <li><a href="#apply" class="text-gray-400 hover:text-white transition-colors">在线报名</a></li>
            <li><a href="#result" class="text-gray-400 hover:text-white transition-colors">结果查询</a></li>
          </ul>
        </div>

        <div>
          <h3 class="text-lg font-bold mb-4">联系我们</h3>
          <ul class="space-y-2">
            <li class="flex items-center text-gray-400">
              <i class="fa fa-map-marker w-5 mr-2"></i>
              <span>计算机科学与技术学院 13教407室</span>
            </li>
            <li class="flex items-center text-gray-400">
              <i class="fa fa-phone w-5 mr-2"></i>
              <span>暂无</span>
            </li>
            <li class="flex items-center text-gray-400">
              <i class="fa fa-envelope w-5 mr-2"></i>
              <span>lab@example.edu.cn</span>
            </li>
          </ul>
        </div>

        <div>
          <h3 class="text-lg font-bold mb-4">招新咨询</h3>
          <p class="text-gray-400 mb-2">工作时间: 周一至周五 9:00-18:00</p>
          <p class="text-gray-400">招新咨询QQ群: 625515470</p>
        </div>
      </div>

      <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500 text-sm">
        <p>© 2025 互联网实验室 版权所有</p>
      </div>
    </div>
  </footer>

  <script>
    // 导航栏滚动效果
    window.addEventListener('scroll', function () {
      const navbar = document.getElementById('navbar');
      if (window.scrollY > 50) {
        navbar.classList.add('shadow-md');
        navbar.classList.remove('bg-white/90');
        navbar.classList.add('bg-white');
      } else {
        navbar.classList.remove('shadow-md');
        navbar.classList.add('bg-white/90');
        navbar.classList.remove('bg-white');
      }
    });

    // 移动端菜单切换
    document.getElementById('menu-toggle').addEventListener('click', function () {
      const mobileMenu = document.getElementById('mobile-menu');
      mobileMenu.classList.toggle('hidden');
    });

    // 发布新帖弹窗
    const postBtn = document.getElementById('postBtn');
    const modalOverlay = document.getElementById('modalOverlay');
    const cancelBtn = document.getElementById('cancelBtn');

    postBtn.addEventListener('click', function () {
      modalOverlay.style.display = 'flex';
    });

    cancelBtn.addEventListener('click', function () {
      modalOverlay.style.display = 'none';
    });

    modalOverlay.addEventListener('click', function (e) {
      if (e.target === modalOverlay) {
        modalOverlay.style.display = 'none';
      }
    });

    // 通知相关功能
    const notificationsBtn = document.getElementById('notificationsBtn');
    const notificationsDropdown = document.getElementById('notificationsDropdown');
    const mobileNotificationsBtn = document.getElementById('mobileNotificationsBtn');
    const mobileNotificationsDropdown = document.getElementById('mobileNotificationsDropdown');
    const notificationBadge = document.getElementById('notificationBadge');
    const mobileNotificationBadge = document.getElementById('mobileNotificationBadge');
    const notificationModal = document.getElementById('notificationModal');
    const closeNotificationModal = document.getElementById('closeNotificationModal');
    const notificationModalTitle = document.getElementById('notificationModalTitle');
    const notificationModalDate = document.getElementById('notificationModalDate');
    const notificationModalContent = document.getElementById('notificationModalContent');
    const markAsReadBtn = document.getElementById('markAsReadBtn');
    const markAllRead = document.getElementById('markAllRead');
    const mobileMarkAllRead = document.getElementById('mobileMarkAllRead');

    let currentNotificationId = null;

    // 桌面端通知下拉菜单切换
    notificationsBtn.addEventListener('click', function (e) {
      e.stopPropagation();
      notificationsDropdown.style.display = notificationsDropdown.style.display === 'block' ? 'none' : 'block';
    });

    // 移动端通知下拉菜单切换
    mobileNotificationsBtn.addEventListener('click', function (e) {
      e.stopPropagation();
      mobileNotificationsDropdown.style.display = mobileNotificationsDropdown.style.display === 'block' ? 'none' : 'block';
    });

    // 点击页面其他地方关闭通知下拉菜单
    document.addEventListener('click', function () {
      notificationsDropdown.style.display = 'none';
      mobileNotificationsDropdown.style.display = 'none';
    });

    // 阻止下拉菜单内部点击事件冒泡
    notificationsDropdown.addEventListener('click', function (e) {
      e.stopPropagation();
    });
    mobileNotificationsDropdown.addEventListener('click', function (e) {
      e.stopPropagation();
    });

    // 打开通知详情
    document.querySelectorAll('.notification-item').forEach(item => {
      item.addEventListener('click', function () {
        currentNotificationId = this.getAttribute('data-id');
        const title = this.querySelector('.font-medium').textContent;
        const date = this.querySelector('.text-gray-500').textContent;
        const content = this.querySelector('.text-gray-600').textContent;

        notificationModalTitle.textContent = title;
        notificationModalDate.textContent = date;
        notificationModalContent.textContent = content;

        // 根据是否已读显示不同按钮状态
        if (this.classList.contains('unread')) {
          markAsReadBtn.textContent = '标记为已读';
          markAsReadBtn.innerHTML = '标记为已读 <i class="fa fa-check ml-1"></i>';
        } else {
          markAsReadBtn.textContent = '已读';
          markAsReadBtn.innerHTML = '已读 <i class="fa fa-check ml-1"></i>';
        }

        notificationModal.style.display = 'flex';
      });
    });

    // 关闭通知详情
    closeNotificationModal.addEventListener('click', function () {
      notificationModal.style.display = 'none';
    });

    notificationModal.addEventListener('click', function (e) {
      if (e.target === notificationModal) {
        notificationModal.style.display = 'none';
      }
    });

    // 标记为已读
    markAsReadBtn.addEventListener('click', function () {
      if (currentNotificationId) {
        document.querySelectorAll(`.notification-item[data-id="${currentNotificationId}"]`).forEach(item => {
          item.classList.remove('unread');
        });
        updateNotificationBadge();
        markAsReadBtn.textContent = '已读';
        markAsReadBtn.innerHTML = '已读 <i class="fa fa-check ml-1"></i>';
      }
    });

    // 全部标为已读
    function markAllAsRead() {
      document.querySelectorAll('.notification-item.unread').forEach(item => {
        item.classList.remove('unread');
      });
      updateNotificationBadge();
    }

    markAllRead.addEventListener('click', markAllAsRead);
    mobileMarkAllRead.addEventListener('click', markAllAsRead);

    // 更新通知徽章数量
    function updateNotificationBadge() {
      const unreadCount = document.querySelectorAll('.notification-item.unread').length;

      if (unreadCount > 0) {
        notificationBadge.textContent = unreadCount;
        mobileNotificationBadge.textContent = unreadCount;
        notificationBadge.style.display = 'flex';
        mobileNotificationBadge.style.display = 'flex';
      } else {
        notificationBadge.style.display = 'none';
        mobileNotificationBadge.style.display = 'none';
      }
    }

    // 表单提交处理
    document.getElementById('application-form').addEventListener('submit', function (e) {
      e.preventDefault();
      alert('报名信息提交成功！我们会尽快审核您的申请。');
      this.reset();
    });

    document.getElementById('result-form').addEventListener('submit', function (e) {
      e.preventDefault();
      alert('查询功能即将上线，敬请期待！');
    });

    // 初始化通知徽章
    updateNotificationBadge();
  </script>
</body>

</html>